<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :xs="27" :sm="27" :md="6" :lg="6" :xl="6">
        <el-card class="card-hover" @mouseenter="hover = true" @mouseleave="hover = false">
          <span style="font-weight: bold;font-size:medium">总收益 <br></span>
          <br>
          <span style="font-weight: bold;font-size:x-large;">￥{{ totalRevenue }}<br></span>
          <br>
          <span style="font-weight: bold;font-size:medium;">同比上周以来：</span>
          <span style="font-weight: bold;font-size:medium;color:rgb(139, 139, 139)">{{ totalRevenueAmplitude }}</span>
        </el-card>
      </el-col>
      <el-col :xs="27" :sm="27" :md="6" :lg="6" :xl="6">
        <el-card class="card-hover" @mouseenter="hover = true" @mouseleave="hover = false">
          <span style="font-weight: bold;font-size:medium">总退款 <br></span>
          <br>
          <span style="font-weight: bold;font-size:x-large;">￥{{ reimburse }}<br></span>
          <br>
          <span style="font-weight: bold;font-size:medium;">同比上周以来：</span>
          <span style="font-weight: bold;font-size:medium;color:rgb(139, 139, 139);">{{ reimburseAmplitude }}</span>
        </el-card>
      </el-col>
      <el-col :xs="27" :sm="27" :md="6" :lg="6" :xl="6">
        <el-card class="card-hover" @mouseenter="hover = true" @mouseleave="hover = false">
          <span style="font-weight: bold;font-size:medium">活跃用户(个)<br></span>
          <br>
          <span style="font-weight: bold;font-size:x-large;">{{ userActive }}<br></span>
          <br>
          <span style="font-weight: bold;font-size:medium;">同比上周以来：</span>
          <span style="font-weight: bold;font-size:medium;color:rgb(139, 139, 139);">{{ userActiveAmplitude }}</span>
        </el-card>
      </el-col>
      <el-col :xs="27" :sm="27" :md="6" :lg="6" :xl="6">
        <el-card class="card-hover" @mouseenter="hover = true" @mouseleave="hover = false">
          <span style="font-weight: bold;font-size:medium">产生订单(单)<br></span>
          <br>
          <span style="font-weight: bold;font-size:x-large;">{{ orderAmount }}<br></span>
          <br>
          <span style="font-weight: bold;font-size:medium;">同比上周以来：</span>
          <span style="font-weight: bold;font-size:medium;color:rgb(139, 139, 139);">{{ orderAmountAmplitude }}</span>
        </el-card>
      </el-col>
      <el-col :xs="27" :sm="27" :md="18" :lg="18" :xl="18">
        <el-card style="height: 450px; margin-bottom: 20px;">
          <span style="font-weight: bold;font-size:medium">数据统计</span>
          <div id="barChart" style="width:auto;height: 400px;"></div>
        </el-card>
      </el-col>
      <el-col :xs="27" :sm="27" :md="6" :lg="6" :xl="6">
        <el-card style="height: 450px;margin-bottom: 20px;">
          <span style="font-weight: bold;font-size:medium">产生订单(单)<br></span>
          <div id="pieChart" style="width:auto;height: 400px;"></div>
        </el-card>
      </el-col>
      <el-col :xs="27" :sm="27" :md="12" :lg="12" :xl="12">
        <el-card style="height: 450px;">
          <span style="font-weight: bold;font-size:medium">用户订单排名<br></span>
          <el-table :data="userTableData" height="400px" style="width: 100%">
            <el-table-column type="index" label="序号" width="80"/>
            <el-table-column prop="createBy" label="用户名称"  />
            <el-table-column prop="count" label="订单量" width="180"  />
          </el-table>
        </el-card>
      </el-col>
      <el-col :xs="27" :sm="27" :md="12" :lg="12" :xl="12">
        <el-card style="height: 450px;">
          <span style="font-weight: bold;font-size:medium">公司订单排名<br></span>
          <el-table :data="proxyTableData" height="400px" style="width: 100%">
            <el-table-column type="index" label="序号" width="80"/>
            <el-table-column prop="createBy" label="用户名称"  />
            <el-table-column prop="count" label="订单量" width="180"  />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!-- 展示订单详情对话框 -->
    <el-dialog :title="title" v-model="detailsDialog" width="1500px" append-to-body text-center>
      <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
      <el-table-column type="index" width="80"  label="序号" align="center" />
      <el-table-column label="订单id" align="center" prop="id" />
      <el-table-column label="交易订单号" align="center" prop="outTradeNo" />
      <el-table-column label="总金额" align="center" prop="totalAmount" />
      <el-table-column label="商品名字" align="center" prop="subject" />
      <el-table-column label="交易状态" align="center" prop="tradeStatus">
        <template #default="scope">
          <dict-tag :options="dict.order_trade_status" :value="scope.row.tradeStatus" />
        </template>
      </el-table-column>
      <el-table-column label="支付成功时间" align="center" prop="successTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.successTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单关闭时间" align="center" prop="closeTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.closeTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
    </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { getTotalAmounts } from "@/api/system/user";
import { getUserActive } from "@/api/system/user";
import { getListTables } from "@/api/order/table";
import { userOrderRank } from "@/api/order/orderRank";
import { proxyOrderRank } from "@/api/order/orderRank";
const totalRevenue = ref("--");
const reimburse = ref("--");
const userActive = ref("--");
const userActiveAmplitude = ref("--");
const totalRevenueAmplitude = ref("--");
const reimburseAmplitude = ref("--");
const orderAmount = ref("--");
const orderAmountAmplitude = ref("--");
onMounted(() => {
  getTotalAmount();
  renderEChart();
  renderPieChart();
  getActive();
  getListTable();
  getUserOrderRank();
  getProxyOrderRank();
});
function renderEChart() {
  var chartDom = document.getElementById('barChart');
  var myChart = echarts.init(chartDom);
  var option;
  const dataList = Array.from(orderListMonth);
  option = {
    xAxis: {
      type: 'category',
      data:  dataList.map(item => item[0]),
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    series: [
      {
        data: dataList.map(item => item[1]),
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  };
  option && myChart.setOption(option);
}
const pieChartData=ref({
  dyOrder:{},
  ksOrder:{},
  bzOrder:{},
  dzOrder:{},
  ttOrder:{},
  wbOrder:{},
  wxOrder:{},
  xhsOrder:{}
})
function renderPieChart() {
  var chartDom = document.getElementById('pieChart');
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        type: 'pie',
        radius: ['30%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: pieChartData.dyOrder, name: '抖音' },
          { value: pieChartData.ksOrder, name: '快手' },
          { value: pieChartData.xhsOrder, name: '小红书' },
          { value: pieChartData.wbOrder, name: '新浪微博' },
          { value: pieChartData.ttOrder, name: '今日头条' },
          { value: pieChartData.bzOrder, name: 'B站' },
          { value: pieChartData.wxOrder, name: '微信' },
          { value: pieChartData.dzOrder, name: '大众点评' }
        ]
      }
    ]
  };

  option && myChart.setOption(option);
}
const userTableData=ref()
const proxyTableData=ref()
//获取用户订单排名
function getUserOrderRank(){
  userOrderRank().then(response => {
    userTableData.value=response.rows
  });
}
//获取代理订单排名
function getProxyOrderRank(){
  proxyOrderRank().then(response => {
   proxyTableData.value=response.data
  });
}
//获取用户活跃度数据
function getActive(){
  getUserActive().then(response => {
    userActive.value=response.data.activeNumber;
    if (response.data.beforeActiveNumber!= 0) {
        var userActiveRadio = (response.data.activeNumber - response.data.beforeActiveNumbert) / response.data.beforeActiveNumber;
        userActiveAmplitude.value = userActiveRadio < 0 ? "下降" + (userActiveRadio).toFixed(2) * 100 + "%" : "上涨" + (userActiveRadio).toFixed(2) * 100 + "%";
      }
      else{
        userActiveAmplitude.value ="--"
      }
  });
}
const state=ref({
  nowAmount:{},
  oldAmount:{},
  nowOrder:{},
  oldOrder:{}
})
let orderListMonth=ref()
function getTotalAmount() { 
  getTotalAmounts().then(
    response => {
      state.nowAmount = response.data.nowTotalAmount;
      state.oldAmount = response.data.preTotalAmount;
      state.nowOrder = response.data.nowOrderNumber;
      state.oldOrder = response.data.preOrderNumber;
      pieChartData.dyOrder=response.data.dyOrder;
      pieChartData.ksOrder=response.data.ksOrder;
      pieChartData.bzOrder=response.data.bzOrder;
      pieChartData.dzOrder=response.data.dzOrder;
      pieChartData.ttOrder=response.data.ttOrder;
      pieChartData.xhsOrder=response.data.xhsOrder;
      pieChartData.wbOrder=response.data.wbOrder;
      pieChartData.wxOrder=response.data.wxOrder;
      let mapObj=response.data.map;
      orderListMonth= new Map(Object.entries(mapObj));
      renderPieChart();
      renderEChart();
      totalRevenue.value = state.nowAmount;
      orderAmount.value = state.nowOrder;
      if (state.oldOrder != 0) {
        var orderRadio = (state.nowOrder - state.oldOrder) / state.oldOrder;
        orderAmountAmplitude.value = orderRadio < 0 ? "下降" + (orderRadio).toFixed(2) * 100 + "%" : "上涨" + (orderRadio).toFixed(2) * 100 + "%";
      }
      else{
        orderAmountAmplitude.value ="--"
      }
      if (state.oldAmount!= 0) {
        var totalAmountRadio = (state.nowAmount - state.oldAmount) / state.oldAmount;
        totalRevenueAmplitude.value = totalAmountRadio < 0 ? "下降" + (totalAmountRadio).toFixed(2) * 100 + "%" : "上涨" + (totalAmountRadio).toFixed(2) * 100 + "%";
      }
      else{
        totalRevenueAmplitude.value ="--"
      }
    }
  )
}
function getListTable() {
  getListTables().then(
    response => {
      
    }
  )
}
</script>

<style scoped>
.card-hover {
  border-radius: 6px;
  height: 160px;
  margin-bottom: 20px;
  transition: background-color 0.1s;
}

.card-hover:hover {
  background-color: #67bef8;
  /* 这里可以设置背景色 */
}
</style>